<template>
	<div>
		<div class="top_bar">
			<p>数据总览</p>
			<div class="data_picker">
				<el-radio-group v-model="day" style="margin-right: 10px">
					<!-- <el-radio-button label="今天" @click="changeDay('今天')" /> -->
					<el-radio-button label="昨天" @click="changeDay('昨天')" />
					<el-radio-button label="前天" @click="changeDay('前天')" />
					<el-radio-button label="近一周" @click="changeDay('近一周')" />
				</el-radio-group>
				<!-- <el-date-picker v-model="dateRange" type="daterange" range-separator="到" start-placeholder="开始时间" end-placeholder="结束时间" /> -->
			</div>
		</div>
		<section class="data_section">
			<div class="data_profiling">
				<div class="data_title" style="background: transparent; padding-left: 10px">
					<span class="title-pre"></span>
					<span style="font-size: 18px">核心指标</span>
				</div>
				<div class="data_main" v-loading="infoLoading" style="margin-top: 2px">
					<el-row>
						<el-col :span="6">
							<div class="grid-content">
								<div class="data-item">
									<div class="data-image">
										<img src="@/assets/patient-primary/cjs.png" alt="" />
									</div>
									<div class="data-right">
										<div class="data-col-title">新增采集记录数</div>
										<div class="data-value">
											<CountTo :startVal="0" :endVal="newCollectedRecords" :duration="1000"></CountTo>
										</div>
										<div class="data-yoy">
											累计：
											<CountTo :startVal="0" :endVal="allCollectedRecords" :duration="1000"></CountTo>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content">
								<div class="data-item">
									<div class="data-image">
										<img src="@/assets/patient-primary/zsy.png" alt="" />
									</div>
									<div class="data-right">
										<div class="data-col-title">新增主索引数</div>
										<div class="data-value">
											<CountTo :startVal="0" :endVal="newIndexesNumber" :duration="1000"></CountTo>
										</div>
										<div class="data-yoy">
											累计：
											<CountTo :startVal="0" :endVal="allIndexesNumber" :duration="1000"></CountTo>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content">
								<div class="data-item">
									<div class="data-image">
										<img src="@/assets/patient-primary/hbcs.png" alt="" />
									</div>
									<div class="data-right">
										<div class="data-col-title">新增合并次数</div>
										<div class="data-value">
											<CountTo :startVal="0" :endVal="newColidationsNumber" :duration="1000"> </CountTo>
										</div>
										<div class="data-yoy">
											累计：
											<CountTo :startVal="0" :endVal="allColidationsNumber" :duration="1000"> </CountTo>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content">
								<div class="data-item">
									<div class="data-image">
										<img src="@/assets/patient-primary/ycsj.png" alt="" />
									</div>
									<div class="data-right">
										<div class="data-col-title">新增异常数据</div>
										<div class="data-value">
											<CountTo :startVal="0" :endVal="newAbnormalData" :duration="1000"></CountTo>
										</div>
										<div class="data-yoy">
											累计：
											<CountTo :startVal="0" :endVal="allAbnormalData" :duration="1000"></CountTo>
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
		</section>
		<section class="data_section">
			<div class="data_q">
				<div class="data_title" style="background: transparent; padding-left: 10px">
					<span class="title-pre"></span>
					<span style="font-size: 18px">患者分布</span>
				</div>
				<div class="data_main">
					<el-row :gutter="10">
						<el-col :span="8">
							<div class="data_title" style="margin-left: 10px">
								年龄分布
								<el-tooltip class="box-item" effect="dark" content="截至当前的患者数据" placement="right-start">
									<img src="@/assets/patient-primary/tip.png" style="width: 18px; height: 18px; cursor: pointer; margin-left: 8px" alt="" />
									<!-- <el-icon style="cursor: pointer"><QuestionFilled /></el-icon> -->
								</el-tooltip>
							</div>
							<div class="data_main" style="padding: 20px 0 0 10px">
								<el-table :data="ageTableData" style="width: 100%" v-loading="ageLoading">
									<el-table-column label="序号" type="index" width="90" align="center"> </el-table-column>
									<el-table-column prop="ageGroup" label="年龄段" align="center"> </el-table-column>
									<el-table-column prop="patientCount" label="数量" align="center"> </el-table-column>
								</el-table>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="data_title" style="justify-content: space-between; padding-right: 16px; margin-left: 10px">
								<span>就医TOP7</span>
								<span @click="visitAll" style="cursor: pointer; color: #667afa">查看更多</span>
							</div>
							<div class="data_main" style="padding: 20px 0 0 10px">
								<el-table :data="visitTableData" style="width: 100%" v-loading="visitLoading">
									<el-table-column prop="serialNumber" label="排名" width="90" align="center"> </el-table-column>
									<el-table-column prop="medicalInstitution" label="医疗机构" align="center"> </el-table-column>
									<el-table-column prop="visitsNumber" label="就诊人数" align="center"> </el-table-column>
								</el-table>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="data_title" style="margin-left: 10px">
								性别分布
								<el-tooltip class="box-item" effect="dark" content="截至当前的患者数据" placement="right-start">
									<img src="@/assets/patient-primary/tip.png" style="width: 18px; height: 18px; cursor: pointer; margin-left: 8px" alt="" />
								</el-tooltip>
							</div>
							<div id="dataSex" v-loading="sexLoading"></div>
						</el-col>
					</el-row>
				</div>
			</div>
		</section>
		<section class="data_section">
			<div class="data_title" style="background: transparent; justify-content: space-between; margin-bottom: 20px; padding-left: 0px">
				<span style="display: flex; flex-direction: row; justify-content: space-around; align-items: center">
					<span class="title-pre"></span>
					<span style="font-size: 18px">患者信息合并情况</span>
				</span>
				<el-radio-group v-model="patientRadio" @change="patientTypeChange">
					<el-radio-button label="来源" />
					<el-radio-button label="类型" />
				</el-radio-group>
			</div>
			<div class="data_main" v-loading="mergerLoading">
				<el-row :gutter="20">
					<el-col :span="4">
						<div style="display: flex; flex-direction: column; height: 100%; justify-content: flex-start">
							<div
								v-for="(item, index) in mergerTotal"
								:key="index"
								style="
									display: flex;
									flex-direction: column;
									background: #f7f8fa;
									border-radius: 4px;
									height: 90px;
									justify-content: space-evenly;
									margin-bottom: 16px;
								"
							>
								<div style="padding-left: 16px; color: #4e5969; font-size: 14px; margin-top: 10px">{{ item.name }}</div>
								<div style="padding-left: 16px; margin-top: 10px" class="data-value">
									<CountTo :startVal="0" :endVal="item.value" :duration="1000"></CountTo>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="20">
						<div id="dataV-merger"></div>
					</el-col>
				</el-row>
			</div>
		</section>

		<el-dialog v-model="isVisitAll" title="就医TOP" :close-on-click-modal="false" :width="640">
			<el-table :data="visitTableDataAll" style="width: 100%" max-height="400px">
				<el-table-column prop="serialNumber" label="排名" width="90" align="center"> </el-table-column>
				<el-table-column prop="medicalInstitution" label="医疗机构" align="center"> </el-table-column>
				<el-table-column prop="visitsNumber" label="就诊人数" align="center"> </el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import CountTo from '@/components/src/vue-countTo.vue'
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'

import { getCoreData, getPatientAge, getPatientSex, getPatientVisit, getPatientMerge, getPatientStation } from '@/api/patient-primary/data-overview'
import timeFormater from 'time-formater'
let mainChart = echarts

let infoLoading = ref(true)
const ageLoading = ref(true)
const sexLoading = ref(true)
const visitLoading = ref(true)
const mergerLoading = ref(true)
const newCollectedRecords = ref(0)
const allCollectedRecords = ref(0)
const newIndexesNumber = ref(0)
const allIndexesNumber = ref(0)
const newColidationsNumber = ref(0)
const allColidationsNumber = ref(0)
const newAbnormalData = ref(0)
const allAbnormalData = ref(0)

const ageTableData = ref([])
const visitTableData = ref([])

const sexData: any = ref([])

const chartColor = ref(['#778FF7', '#9FD4FD', '#FADC6D', '#7BE188', '#79f3dd'])

const chartsPieColor = ref(['#5774F4', '#F76560', '#F9CC45', '#79f3dd', '#7BE188', '#FADC6D'])

const day = ref('昨天')
const dateRange = ref([
	timeFormater(new Date(new Date().getTime() - 24 * 60 * 60 * 1000)).format('YYYY-MM-DD 00:00:00'),
	timeFormater(new Date(new Date().getTime() - 24 * 60 * 60 * 1000)).format('YYYY-MM-DD 23:59:59')
])

const patientRadio = ref('来源')

let chartsList: any = []

const mergerList = ref([])
const mergerAxias = ref([])
const mergerTotal = ref([])

const isVisitAll = ref(false)
const visitTableDataAll = ref([])

const changeDay = type => {
	switch (type) {
		case '今天':
			dateRange.value = [
				timeFormater(new Date().getTime()).format('YYYY-MM-DD 00:00:00'),
				timeFormater(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
			]
			break
		case '昨天':
			dateRange.value = [
				timeFormater(new Date(new Date().getTime() - 24 * 60 * 60 * 1000)).format('YYYY-MM-DD 00:00:00'),
				timeFormater(new Date(new Date().getTime() - 24 * 60 * 60 * 1000)).format('YYYY-MM-DD 23:59:59')
			]
			break
		case '前天':
			dateRange.value = [
				timeFormater(new Date(new Date().getTime() - 2 * 24 * 60 * 60 * 1000)).format('YYYY-MM-DD 00:00:00'),
				timeFormater(new Date(new Date().getTime() - 2 * 24 * 60 * 60 * 1000)).format('YYYY-MM-DD 23:59:59')
			]
			break
		case '近一周':
			dateRange.value = [
				timeFormater(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)).format('YYYY-MM-DD 00:00:00'),
				timeFormater(new Date(new Date().getTime() - 24 * 60 * 60 * 1000)).format('YYYY-MM-DD 23:59:59')
			]
			break
	}

	infoLoading.value = true
	ageLoading.value = true
	sexLoading.value = true
	visitLoading.value = true
	mergerLoading.value = true

	getCoreDatas()
	getPatientAges()
	getPatientSexs()
	getPatientVisits()
	getPatientMerges()
}

onMounted(() => {
	init()

	window.addEventListener('resize', () => {
		if (chartsList.length) {
			chartsList.forEach(chart => {
				chart.resize()
			})
		}
	})
})

onUnmounted(() => {
	mainChart.dispose
	window.addEventListener('resize', () => {})
	chartsList = []
})

const init = () => {
	infoLoading.value = true
	ageLoading.value = true
	sexLoading.value = true
	visitLoading.value = true
	mergerLoading.value = true

	getCoreDatas()
	getPatientAges()
	getPatientSexs()
	getPatientVisits()
	getPatientMerges()
}

// 核心
const getCoreDatas = () => {
	newCollectedRecords.value = 0
	allCollectedRecords.value = 0
	newIndexesNumber.value = 0
	allIndexesNumber.value = 0
	newColidationsNumber.value = 0
	allColidationsNumber.value = 0
	newAbnormalData.value = 0
	allAbnormalData.value = 0
	getCoreData({
		startTime: dateRange.value[0],
		endTime: dateRange.value[1]
	})
		.then(res => {
			infoLoading.value = false

			if (res.data) {
				newCollectedRecords.value = parseFloat(res.data.newCollectedRecords) || 0
				allCollectedRecords.value = parseFloat(res.data.allCollectedRecords) || 0
				newIndexesNumber.value = parseFloat(res.data.newIndexesNumber) || 0
				allIndexesNumber.value = parseFloat(res.data.allIndexesNumber) || 0
				newColidationsNumber.value = parseFloat(res.data.newColidationsNumber) || 0
				allColidationsNumber.value = parseFloat(res.data.allColidationsNumber) || 0
				newAbnormalData.value = parseFloat(res.data.newAbnormalData) || 0
				allAbnormalData.value = parseFloat(res.data.allAbnormalData) || 0
			}
		})
		.catch(() => {
			infoLoading.value = false
		})
}

// 年龄
const getPatientAges = () => {
	ageTableData.value = []
	getPatientAge({
		startTime: dateRange.value[0],
		endTime: dateRange.value[1]
	})
		.then(res => {
			ageLoading.value = false
			ageTableData.value = res.data
		})
		.catch(() => {
			ageLoading.value = false
		})
}

// 性别
const getPatientSexs = () => {
	sexData.value = []
	getPatientSex({})
		.then(res => {
			sexLoading.value = false

			res.data.forEach(element => {
				let color = ''
				switch (element.sex) {
					case '男性':
						color = '#5774F4'
						break
					case '女性':
						color = '#F76560'
						break
					case '未知':
						color = '#F9CC45'
						break
					default:
						color = '#79f3dd'
						break
				}
				sexData.value.push({
					name: element.sex,
					value: element.patientCount,
					itemStyle: {
						color: color
					}
				})
			})

			initSexChart()
		})
		.catch(() => {
			sexLoading.value = false
		})
}

// 性别图表
const initSexChart = () => {
	const dom = document.getElementById('dataSex')
	let myChart = mainChart.getInstanceByDom(dom)
	if (!sexData.value.length) {
		myChart.dispose()
		return
	}
	if (!myChart) {
		myChart = mainChart.init(dom)
		chartsList.push(myChart)
	}

	myChart.setOption({
		title: {
			show: sexData.value.length ? false : true,
			text: '暂无数据',
			left: 'center',
			top: 'middle',
			textStyle: {
				color: '#999',
				fontSize: 16
			}
		},
		color: chartsPieColor.value,
		tooltip: {
			trigger: 'item'
		},
		legend: {
			itemGap: 10,
			itemWidth: 10,
			itemHeight: 10,
			left: 'center',
			bottom: 0
		},
		series: [
			{
				type: 'pie',
				radius: '60%',
				center: ['50%', '50%'],
				label: {
					formatter: '{b}\n{c}人',
					alignTo: 'labelLine',
					textStyle: {
						color: '#000'
					}
				},
				labelLine: {
					length2: '40'
				},
				data: sexData.value
			}
		]
	})
}

// 就诊
const getPatientVisits = () => {
	visitTableData.value = []
	getPatientVisit({
		startTime: dateRange.value[0],
		endTime: dateRange.value[1]
	})
		.then(res => {
			visitLoading.value = false
			visitTableData.value = res.data
		})
		.catch(() => {
			visitLoading.value = false
		})
}

// 就站更多
const getPatientStationAll = () => {
	getPatientStation({
		startTime: dateRange.value[0],
		endTime: dateRange.value[1]
	}).then(res => {
		console.log(res)
		visitTableDataAll.value = res.data
	})
}

const visitAll = () => {
	isVisitAll.value = true
	visitTableDataAll.value = []

	getPatientStationAll()
}

// 合并
const series = ref([])
const getPatientMerges = () => {
	series.value = []
	mergerList.value = []
	mergerAxias.value = []
	mergerTotal.value = []
	getPatientMerge({
		types: patientRadio.value == '来源' ? '1' : '2',
		startTime: dateRange.value[0],
		endTime: dateRange.value[1]
	})
		.then(res => {
			mergerLoading.value = false

			if (patientRadio.value == '来源') {
				const data1 = []
				const data2 = []
				const data3 = []
				const data4 = []
				const mergerListData = res.data.mergerList
				mergerListData.forEach((item, index) => {
					mergerAxias.value.push(item.hours + '点')
					data1.push(item.mjzCnt)
					data2.push(item.zyCnt)
					data3.push(item.tjCnt)
					data4.push(item.qtCnt)
				})

				mergerList.value.push(data1)
				mergerList.value.push(data2)
				mergerList.value.push(data3)
				mergerList.value.push(data4)

				mergerTotal.value.push({
					name: '门(急)诊',
					value: parseFloat(res.data.mergerMjzCnt)
				})
				mergerTotal.value.push({
					name: '住院',
					value: parseFloat(res.data.mergerZyCnt)
				})
				mergerTotal.value.push({
					name: '体检',
					value: parseFloat(res.data.mergerTjCnt)
				})
				mergerTotal.value.push({
					name: '公卫',
					value: parseFloat(res.data.mergerQtCnt)
				})
			} else {
				const data1 = []
				const data2 = []
				res.data.typeList.forEach((item, index) => {
					mergerAxias.value.push(item.hours + '点')
					data1.push(item.autoMergerCnt)
					data2.push(item.manuMergerCnt)
				})
				mergerList.value.push(data1)
				mergerList.value.push(data2)

				mergerTotal.value.push({
					name: '自动合并',
					value: parseFloat(res.data.autoAllCnt)
				})
				mergerTotal.value.push({
					name: '手动合并',
					value: parseFloat(res.data.manuAllCnt)
				})
			}

			initMergesCharts()
		})
		.catch(() => {
			mergerLoading.value = false
		})
}

const initMergesCharts = () => {
	const dom = document.getElementById('dataV-merger')
	let myChart = mainChart.getInstanceByDom(dom)
	if (!myChart) {
		myChart = mainChart.init(dom)
		chartsList.push(myChart)
	}
	myChart.clear()
	let xAxis: any = []
	if (patientRadio.value == '来源') {
		xAxis = ['门(急)诊', '住院', '体检', '公卫']
	} else {
		xAxis = ['自动合并', '手动合并']
	}

	xAxis.forEach((name, index) => {
		series.value.push({
			name: name,
			type: 'bar',
			barWidth: '20px',
			stack: 'total',
			label: {
				show: true,
				textStyle: {
					color: '#fff'
				},
				formatter: params => {
					return parseFloat(params.value) ? params.value : ''
				}
			},
			data: mergerList.value[index]
		})
	})

	myChart.setOption({
		title: {
			show: mergerAxias.value.length ? false : true,
			text: '暂无数据',
			left: 'center',
			top: 'middle',
			textStyle: {
				color: '#999',
				fontSize: 16
			}
		},
		color: chartColor.value,
		grid: {
			top: 50,
			bottom: 0,
			left: 10,
			right: 0,
			containLabel: true
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: xAxis,
			top: 0,
			left: 0
		},
		yAxis: {
			type: 'value',
			minInterval: 1
		},
		xAxis: {
			type: 'category',
			data: mergerAxias.value
		},
		series: series.value
	})
}

// 切换
const patientTypeChange = e => {
	patientRadio.value = e
	mergerLoading.value = true
	getPatientMerges()
}
</script>
<style lang="scss">
.top_bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background: #fff;
	padding: 8px 16px;
	box-sizing: border-box;

	p {
		font-weight: bold;
		font-size: 16px;
	}

	.data_picker {
		display: flex;
		align-items: center;
	}
}

.data_section {
	margin-top: 20px;
	padding: 20px;
	font-size: 16px;
	color: rgba(16, 16, 16, 1);
	background: #fff;

	.data_profiling {
		height: 210px;
		width: 100%;

		.data_main {
			width: 100%;
			height: calc(100% - 17px);
			margin-top: 14px;
			margin-top: 14px;

			.el-row {
				margin-bottom: 20px;

				&:last-child {
					margin-bottom: 0;
				}
			}

			.el-col {
				border-radius: 4px;
			}

			.grid-content {
				padding: 10px;
				min-height: 36px;
			}

			.data-item {
				border-radius: 6px;
				background: rgba(247, 248, 250, 1);

				height: 100px;
				padding: 16px 20px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;

				.data-image {
					width: 70px;

					img {
						width: 48px;
						height: 50px;
					}
				}

				.data-right {
				}
			}
		}
	}

	.data_q {
		.data_main {
			padding-top: 16px;
		}

		#dataSex {
			width: 100%;
			height: 370px;
		}

		.dataVList {
			display: grid;
			grid-template-columns: auto auto;
			// grid-gap: 20px;
			padding: 30px 2px;

			.dataV-item {
				width: 100%;
				height: 40px;

				.dataV-name {
					height: 20px;
					font-size: 12px;
					display: flex;
					align-items: center;
					padding-top: 10px;

					.sp-block {
						width: 13px;
						height: 13px;
						margin-right: 5px;
					}
				}

				.dataV-value {
					margin-left: 18px;
					font-size: 14px;
				}
			}
		}
	}

	#dataV-merger {
		width: 100%;
		height: 400px;
	}

	.data_title {
		// font-family: AlibabaPuHui-medium;
		padding-left: 16px;
		background: #f7f8fa;
		line-height: 32px;
		font-size: 14px;
		font-weight: 550;
		color: #1d2129;
		display: flex;
		flex-direction: row;
		align-items: center;

		.title-pre {
			width: 3px;
			height: 16px;
			background: #778ff7;
			margin-right: 11px;
		}

		.see-more {
			font-size: 12px;
			color: rgba(22, 93, 255, 1);
			cursor: pointer;
		}
	}

	.data-col-title {
		font-family: AlibabaPuHui-regular;
		font-weight: 400;
		color: #4e5969;
		line-height: 16px;
		font-size: 14px;
	}

	.data-value {
		margin-top: 15px;
		font-size: 30px;
		color: #1d2129;

		span {
			font-weight: bold;
			font-family: 'D-DIN';
		}
	}

	.data-yoy {
		font-size: 12px;
		color: rgba(78, 89, 105, 1);
		margin-top: 5px;
	}

	.sp-blue {
		background: rgba(1, 109, 218, 1);
	}

	.sp-blue8 {
		background: rgba(35, 160, 228, 1);
	}

	.sp-blue6 {
		background: rgba(81, 192, 240, 1);
	}

	.sp-blue4 {
		background: rgba(107, 224, 224, 1);
	}

	.sp-blue2 {
		background: rgba(36, 223, 190, 1);
	}

	.sp-green4 {
		background: rgb(52, 219, 189);
	}

	.sp-green2 {
		background: rgb(121, 243, 221);
	}

	.el-table th.el-table__cell {
		background-color: #f2f3f5 !important;
		color: #1d2129;
		font-size: 14px;
	}

	// .el-table .el-table__cell {
	// 	padding: 8px 0;
	// }
	// .el-table {
	// 	border: 0;
	// }
	// .el-table::before {
	// 	height: 0;
	// }
	// .el-table::after {
	// 	width: 0;
	// }

	// .el-table .el-table__body {
	// 	// border: 1px solid #e5e6eb;
	// 	// border-bottom-width: 0;
	// 	.el-table__row {
	// 		td {
	// 			&:nth-child(1) {
	// 				border-left: 1px solid #ebeef5;
	// 				border-right-width: 0;
	// 			}
	// 			&:nth-child(2) {
	// 				border-right-width: 0;
	// 			}
	// 			&:nth-child(3) {
	// 				border-right-width: 0;
	// 			}
	// 		}
	// 	}
	// }

	// .el-table .el-table__header {
	// 	th {
	// 		&:nth-child(1) {
	// 			border-right-width: 0;
	// 		}
	// 		&:nth-child(2) {
	// 			border-right-width: 0;
	// 		}
	// 		&:nth-child(3) {
	// 			border-right-width: 0;
	// 		}
	// 	}
	// }
}
</style>
